<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="artFrom"
        :model="artFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="所属城市：" label-for="city_id">
              <Select v-model="artFrom.city_id"  @on-change="selectCity" placeholder="请选择所属城市">
                  <Option v-for="item in cityList" :value="item.city_id" :key="item.city_id">{{ item.city_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="所属公司：" label-for="company_id">
              <Select v-model="artFrom.company_id"   placeholder="请选择所属城市">
                  <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.company_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="排班日期：" label-for="plan_dates_range">
              <DatePicker :value="artFrom.plan_dates_range" @on-change="selectDays" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择排班日期" style="width: 200px"></DatePicker>
            </FormItem>
          </Col>
                      

          <Col v-bind="grid">
            <FormItem label="班次状态：" label-for="status">
              <Select v-model="artFrom.status"   placeholder="请选择班次状态">
                <Option label="终止运营" :value="0" />
                <Option label="正常运营" :value="1" />
                    
              </Select>
            </FormItem>
          </Col>
           <Col v-bind="grid">
            <FormItem label="线路名称："  prop="line_id" :label-width="100">
                <Select
                  placeholder="输入关键词选择线路"
                  v-model="artFrom.line_id"
                  filterable
                  :remote-method="remoteMethodartFrom" 
                  :loading="loading1">
                  <Option v-for="(item, index) in options2" :value="item.line_id" :key="index">{{item.line_sn+item.line_name}}</Option>
              </Select>
              </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="条件搜索：" label-for="line_id">
              <Input
                search
                enter-button
                placeholder="线路编号|关键字|ID"
                v-model="artFrom.keyWord"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="Button">
        <Button type="primary" size="small" class="" icon="md-add" style="margin-right: 10px;" @click="showAddRegular=true">班次排班</Button>
        <Button type="warning" size="small" style="margin-right: 10px;" @click="addTemporaryPlanShow=true">添加临时班次</Button>
        <Button type="error" size="small" style="margin-right: 10px;" @click="batchEditShow=true">批量修改</Button>
        <Tooltip content="导出数据" :disabled="!!tableList.length">
          <Button
           size="small"
            class="export"
            icon="ios-share-outline"
            @click="exports"
            >导出</Button
          >
        </Tooltip>
      </div>
      <Table
        ref="table"
        :columns="columns"
        :data="tableList"
        class="ivu-mt"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
     
        <template slot-scope="{ row, index }" slot="driver-action">
          <div v-if="row.driver" @click="driverClick(row)">
            <div>{{row.driver ? row.driver.driver_name : ''}}</div>
            <div>{{row.car ? row.car.car_num : ''}}</div>
          </div>
          <a v-else size="small" @click="driverClick(row)">添加司机</a>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <a v-if="row.status===1||row.status===2||row.status===3"  style="color:red" size="small" @click="changePlaneStatusClick('remove', row)">下线</a>
            <a v-if="row.status===0" style="color:green" size="small" @click="changePlaneStatusClick('add', row)">上线</a>
            <Divider v-if="row.status===1||row.status===2||row.status===3" type="vertical" />
            <a v-if="row.status===1||row.status===2||row.status===3"  size="small" @click="ediePlanClick(row)">编辑</a>
            <Divider v-if="row.status===1||row.status===2||row.status===3" type="vertical" />
            <a v-if="row.status===1||row.status===2||row.status===3"  size="small" @click="lookPassenger(row)">查看乘客</a>
            <Divider v-if="row.status===1||row.status===2||row.status===3" type="vertical" />
            <a v-if="row.status===1||row.status===2||row.status===3" size="small" @click="sendSms(row)">发送短信</a>        
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>

      <!-- 批量排班 -->
      <Modal v-model="showAddRegular"  width="50%"   scrollable   title="班次排班"  :mask-closable="false"   :z-index="1"   @on-cancel="closePlanForm('regularForm')"  @on-ok="submRegularForm('regularForm')"   >
        <Form
          class="formValidate mt20"
          ref="regularForm"
          :rules="ruleValidate"
          :model="regularForm"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
        >
          <Row :gutter="24" type="flex">
            <Col span="24">
              <FormItem label="线路名称："  prop="line_id" :label-width="100">
                <Select
                  placeholder="输入关键词选择线路"
                  v-model="regularForm.line_id"
                  @on-change="selectLine"
                  filterable
                  :remote-method="remoteMethod" 
                  @on-query-change="onQueryChange"
                  :loading="loading1">
                  <Option v-for="(item, index) in options" :value="item.line_id" :key="index">{{item.line_sn+item.line_name}}</Option>
              </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="线路名称："  prop="regular_version_id" :label-width="100">
                <Select
                  v-model="regularForm.regular_version_id"
                  placeholder="请选择线路班次版本"
                >
                  <Option
                    v-for="item in regularVersionList"
                    :key="item.id"
                    :label="item.sales_desc"
                    :value="item.id"
                  />
              </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="排班日期："  prop="plan_dates_range" :label-width="100">
                  <DatePicker :value="regularForm.plan_dates_range" @on-change="regularFormSelectDay" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择排班日期" style="width: 200px"></DatePicker>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="座位数量："  prop="seat" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.seat"  ></InputNumber>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="班次类型："  prop="plan_type" :label-width="100">
                <RadioGroup v-model="regularForm.plan_type">
                    <Radio :label="1">固定班</Radio>
                    <Radio :label="2">流水班</Radio>
                    <Radio :label="3">预约班</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col v-if="regularForm.plan_type==2" span="24">
              <FormItem label="间隔时间(分钟)："  prop="division_time" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.division_time"  ></InputNumber>
              </FormItem>
            </Col>
            <Col  v-if="regularForm.plan_type==3"  span="24">
              <FormItem  label="最低发车人数："  prop="lowest_num" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.lowest_num"  ></InputNumber>
              </FormItem>
            </Col>
            <FormItem  label="司机:" prop="driver_id">
              <Select
                  placeholder="输入名字选择司机"
                  v-model="regularForm.driver_id"
                  :label-in-value="true"
                  filterable
                  :remote-method="searchDriver" 
                  :loading="loading1">
                  <Option v-for="(item, index) in driverOptions" :value="item.id" :key="index">{{item.driver_name}},{{item.phone}}</Option>
               </Select>
            </FormItem>
            <FormItem label="车牌号" prop="car_id">
              <div  >
                <Select
                  placeholder="请输入车牌号选择"
                  v-model="regularForm.car_id"
                  :label-in-value="true"
                  filterable
                  :remote-method="searchCar" 
                  :loading="loading1">
                  <Option v-for="(item, index) in carOptions" :value="item.id" :key="index">{{item.car_num}}</Option>
               </Select>
              </div>
            </FormItem>
            <Col span="24" >
              <FormItem label="是否开启返程："  prop="is_return_trip" :label-width="100">
                <RadioGroup v-model="regularForm.is_return_trip">
                  <Radio :label="0">关闭</Radio>
                  <Radio :label="1">开启</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="24"  v-if="regularForm.is_return_trip">
              <FormItem label="返程时间(分钟)："  prop="return_mins" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.return_mins"  ></InputNumber>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="备注："  prop="remark" :label-width="100">
                <Input v-model="regularForm.remark" maxlength="100" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
              </FormItem>
            </Col>
          </Row>
      
        </Form>   
      </Modal>
      <!-- 批量排班 -->
      <!-- 临时班次 -->
      <Modal title="添加临时班次" width="50%" v-model="addTemporaryPlanShow" scrollable   :mask-closable="false"  :z-index="1" @on-cancel="resetTemporaryForm('temporaryForm')" @on-ok="submTemporaryForm('temporaryForm')">
        <Form ref="temporaryForm" :model="temporaryForm" :rules="ruleValidate" :label-width="120" class="demo-ruleForm">
          <FormItem label="排班线路：" prop="line_id">
            <Select
                placeholder="输入关键词选择线路"
                v-model="temporaryForm.line_id"
                @on-change="selectLine"
                filterable
                :remote-method="remoteMethod" 
                @on-query-change="onQueryChange"
                :loading="loading1">
                <Option v-for="(item, index) in options" :value="item.line_id" :key="index">{{item.line_sn+item.line_name}}</Option>
             </Select>
          </FormItem>
          <FormItem prop="plan_date" label="排班日期：" class="date-input">
            <DatePicker :value="temporaryForm.plan_date" @on-change="temporaryFormSelectDay" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择排班日期" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem prop="dp_time" label="班次时间：" class="date-input">
              <TimePicker v-model="temporaryForm.dp_time" format="HH:mm"  placeholder="选择出发时间" style="width: 112px"></TimePicker>
          </FormItem>
           <FormItem prop="seat" label="可售座位数：">
           <InputNumber :min="0"  v-model="temporaryForm.seat"  ></InputNumber>
          </FormItem>
          <FormItem prop="plan_type" label="班次类型：">
            <RadioGroup v-model="temporaryForm.plan_type">
              <Radio :label="1">固定班</Radio>
              <Radio :label="2">流水班</Radio>
              <Radio :label="3">预约班</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="temporaryForm.plan_type==3" prop="lowest_num" label="最低发车人数：">
             <InputNumber :min="0"  v-model="temporaryForm.lowest_num"  ></InputNumber>
          </FormItem>
          <FormItem  label="司机:" prop="driver_id">
            <Select
                placeholder="输入名字选择司机"
                v-model="temporaryForm.driver_id"
                :label-in-value="true"
                filterable
                :remote-method="searchDriver" 
                :loading="loading1">
                <Option v-for="(item, index) in driverOptions" :value="item.id" :key="index">{{item.driver_name}},{{item.phone}}</Option>
             </Select>
          </FormItem>
          <FormItem label="车牌号" prop="car_id">
            <div  >
              <Select
                placeholder="请输入车牌号选择"
                v-model="temporaryForm.car_id"
                :label-in-value="true"
                filterable
                :remote-method="searchCar" 
                :loading="loading1">
                <Option v-for="(item, index) in carOptions" :value="item.id" :key="index">{{item.car_num}}</Option>
             </Select>
            </div>
          </FormItem>
          <FormItem prop="is_return_trip" label="是否开启返程：">
            <RadioGroup v-model="temporaryForm.is_return_trip">
                <Radio :label="0">关闭</Radio>
                <Radio :label="1">开启</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="temporaryForm.is_return_trip" prop="return_trip_date" label="返程时间(分钟):">
            <InputNumber :min="0"  v-model="temporaryForm.return_mins"  ></InputNumber>
          </FormItem>
          <FormItem prop="remark" label="备注：">
            <Input v-model="temporaryForm.remark" maxlength="100" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
          </FormItem>    
        </Form>
      </Modal>
      <!-- 临时班次 -->

      <!-- 批量修改 -->
      <Modal title="批量修改" width="50%" v-model="batchEditShow"  scrollable   :mask-closable="false"  :z-index="1"  @on-cancel="resetBatchForm('batchForm')"  @on-ok="submBatchForm('batchForm')">
        <Form ref="batchForm" :model="batchForm" :rules="ruleValidate" :label-width="120" class="demo-ruleForm">
          <FormItem label="排班线路：" prop="line_id">
            <Select
                placeholder="输入关键词选择线路"
                v-model="batchForm.line_id"
                @on-change="selectLine"
                filterable
                :remote-method="remoteMethod" 
                @on-query-change="onQueryChange"
                :loading="loading1">
                <Option v-for="(item, index) in options" :value="item.line_id" :key="index">{{item.line_sn+item.line_name}}</Option>
             </Select>
          </FormItem>
          <FormItem prop="plan_dates_range" label="修改日期：" class="date-input">
            <DatePicker :value="batchForm.plan_dates_range" @on-change="batchFormSelectDay" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择修改日期" style="width: 200px"></DatePicker>
          </FormItem>

          <FormItem prop="status" label="是否运营:">
            <RadioGroup v-model="batchForm.status">
              <Radio :label="1">正常运营</Radio>
              <Radio :label="0">终止运营</Radio>
            </RadioGroup>
          </FormItem>
          
          <FormItem prop="is_return_trip" label="是否开启返程:">
            <RadioGroup v-model="batchForm.is_return_trip">
                <Radio :label="0">关闭</Radio>
                <Radio :label="1">开启</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="batchForm.is_return_trip" prop="return_trip_date" label="返程时间(分钟)：">
            <InputNumber :min="0"  v-model="batchForm.return_mins"  ></InputNumber>
          </FormItem>

          <FormItem prop="remark" label="备注：">
            <Input v-model="batchForm.remark" maxlength="100" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 批量修改 -->
      <!-- 编辑班次 -->
      <Modal title="编辑班次" width="50%" v-model="PlanFormVisible"  :mask-closable="false"   :z-index="1"   @on-cancel="PlanFormVisible = false"  @on-ok="editPlan('planForm')">
        <Form ref="planForm" :model="planForm"  :rules="ruleValidate" :label-width="120" class="demo-ruleForm">
          <FormItem prop="date_desc" label="班次:">
            <Input v-model="planForm.start_time" disabled />
          </FormItem>
          <!-- <FormItem label="车牌号" prop="car_id">
            <div v-show="!planForm.car_id" >
              <Select
                placeholder="请输入车牌号选择"
                v-model="planForm.car_id"
                :label-in-value="true"
                filterable
                :remote-method="searchCar" 
                @on-change="selectCar"
                :loading="loading1">
                <Option v-for="(item, index) in carOptions" :value="item.id" :key="index">{{item.car_num}}</Option>
             </Select>
            </div>
            
             <div v-show="planForm.car_id" style="display: flex;">
              <Input v-model="planForm.car.car_num" disabled size="small"/>
              <Button type="primary" style="margin-left: 15px;" @click="planForm.car_id=''">重新选择</Button>
             </div>
          </FormItem>

          <FormItem  label="司机:" prop="driver_id">
            <Select
                v-show="!planForm.driver_id" 
                placeholder="输入名字选择司机"
                v-model="planForm.driver_id"
                :label-in-value="true"
                @on-change="selectDriver"
                filterable
                default-label="北京"
                :remote-method="searchDriver" 
                :loading="loading1">
                <Option v-for="(item, index) in driverOptions" :value="item.id" :key="index">{{item.driver_name}},{{item.phone}}</Option>
             </Select>

             <div  v-show="planForm.driver_id"  style="display: flex;">
              <Input v-model="planForm.driver.driver_name" disabled size="small"/>
              <Button type="primary" style="margin-left: 15px;" @click="planForm.driver_id=''">重新选择</Button>
             </div>
          </FormItem> -->
        
          <FormItem prop="seat" label="座位数:">
            <InputNumber v-model="planForm.seat"  :min="0" />
          </FormItem>
          <!-- <FormItem v-if="planForm.plan_type==3" prop="lowest_num" label="最低发车人数:">
            <InputNumber v-model="planForm.lowest_num" :min="0" />
          </FormItem> -->
          <!-- <FormItem v-if="planForm.plan_type==3" label="是否必发车:">
            <el-switch
              v-model="planForm.is_must"
              active-color="#13ce66"
              inactive-color="#c0c4cc"
            />
          </FormItem> -->
          <FormItem label="班次类型："  prop="plan_type" :label-width="100">
            <RadioGroup v-model="planForm.plan_type">
                <Radio :label="1">固定班</Radio>
                <Radio :label="2">流水班</Radio>
                <Radio :label="3">预约班</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="planForm.plan_type==2" label="间隔时间(分钟)："  prop="division_time" :label-width="100">
              <InputNumber :min="0"  v-model="planForm.division_time"  ></InputNumber>
          </FormItem>
        <FormItem v-if="planForm.plan_type==3" prop="lowest_num" label="最低发车人数:">
          <InputNumber v-model="planForm.lowest_num" :min="0" />
        </FormItem>
        
          <FormItem v-if="planForm.is_return_trip" prop="return_trip_date" label="返程时间:">
              <DatePicker :value="planForm.return_trip_date" type="datetime" on-change="selectReturnTrip" format="yyyy-MM-dd HH:mm" placeholder="选择返程日期时间" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem prop="remark" label="备注:">
            <Input v-model="planForm.remark" maxlength="100" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 编辑班次 -->
      <!-- 乘客 -->
      <Modal title="乘客列表" width="65%" v-model="passengerVisible" footer-hide	 scrollable   :mask-closable="false"  :z-index="1">
        <Button  icon="ios-download-outline" type="primary" @click="exportPassenger">导出乘客</Button>
        <Table 
         ref="table"
        :columns="columns2"
        :data="orderBusList"
        class="ivu-mt"
        highlight-row
        no-data-text="无乘客信息"
        no-filtered-data-text="暂无乘客信息"
        >
        <template slot-scope="{ row,index }" slot="use">
            <span>{{row.is_use ? '是' : '否'}}</span>
       </template>
        <template slot-scope="{ row,index }" slot="passenger_info">
           <template v-if="row.passenger_list&&row.passenger_list.length">
              <div v-for="(item,index) in row.passenger_list" :key="index">
                <span  v-show="item">{{ item.name }}-</span><span>{{ item.id_card }}-</span><span>{{ item.phone }}-</span><span>{{ item.type==1?'成人票':'儿童票' }}</span>
              </div>
            </template>
            <div v-else> 
              无乘客信息
            </div>         
        </template>
          
        </Table>
      </Modal>
      <!-- 乘客 -->
      <!-- 发送短信 -->
      <Modal title="发送短信" width="35%" v-model="sendFormVisible" :mask-closable="false" ok-text="确认发送"   :z-index="1"   @on-cancel="sendFormVisible = false"  @on-ok="clickeSendSms('sendForm')">
        <Form ref="sendForm" :model="sendForm" :label-width="120">
          <FormItem prop="send_type" label="短信类型:">
            <RadioGroup v-model="sendForm.send_type">
              <Radio :label="1">预约成功</Radio>
              <Radio :label="2">预约失败</Radio>
              <Radio :label="3">晚点通知</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem prop="notice" label="备注:">
            <Input v-model="sendForm.notice" maxlength="50" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
          </FormItem>
        </Form>
      </Modal>
      <!-- 发送短信 -->
       <!-- 选择司机 -->
       <Modal title="选择司机" width="35%" v-model="selectDriver" :mask-closable="false" ok-text="确认添加"   :z-index="1"   @on-cancel="selectDriver = false"   @on-ok="editPlan('planForm')">
        <Form ref="planForm" :model="planForm" :label-width="120">
          <FormItem label="班次:">
            <Input v-model="planForm.start_time" disabled />
          </FormItem>
          <FormItem  label="司机:" prop="driver_id">
            <Select
                placeholder="输入名字选择司机"
                v-model="planForm.driver_id"
                :label-in-value="true"
                filterable
                :remote-method="searchDriver" 
                :loading="loading1">
                <Option v-for="(item, index) in driverOptions" :value="item.id" :key="index">{{item.driver_name}},{{item.phone}}</Option>
             </Select>
          </FormItem>
          <FormItem label="车牌号" prop="car_id">
            <div  >
              <Select
                placeholder="请输入车牌号选择"
                v-model="planForm.car_id"
                :label-in-value="true"
                filterable
                :remote-method="searchCar" 
                :loading="loading1">
                <Option v-for="(item, index) in carOptions" :value="item.id" :key="index">{{item.car_num}}</Option>
             </Select>
            </div>
          </FormItem>
        </Form>
      </Modal>
      <!-- 选择司机 -->
    </Card>
    
</template>

<script>
import toExcel from "../../../utils/Excel.js";
import { mapState } from "vuex";
import {adminInfoApi} from "@/api/setting"

import {
  sendPlanSmsApi,
  exportBusPassengerListApi,
  changePlanStatusApi,
  exportLinePlanListApi,
  batchEditPlanApi,
  addTemporaryPlanApi,
  addLineRegularApi,
  getRegularVersionApi,
  getLinePlan,
  searchLineApi,
  searchDriverApi,
  searchCarApi
} from "@/api/line";

import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "custom_busList",
  components: { },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/userLevel", ["categoryId"]),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  data() {
    return {
      selectDriver: false,
      selectDcForm: {},
      driverShow: false,
      carShow: false,
      cityList: [],
      companyList:[],
      template: false,
      modals: false,
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      artFrom: {
        keyWord: '',
        plan_dates_range: [],
        city_id: '',
        company_id: '',
        line_id:'',
        status: 1,
        page: 1,
        limit: 25
      },
      list: [],
      tableList: [],
      headeNum: [],
      treeSelect: [],
      loading: false,
      columns: [
     
        {
          title: "班次ID",
          key: "plan_id",
          width: 100,
        },
        {
          title: "班次",
          key: "start_time",
          width: 120,
        },
        {
          title: "线路编号",
          key: "line_sn",
          minWidth: 100,
        },
        {
          title: "出发地",
          key: "origin",
          minWidth: 100,
        },
        {
          title: "目的地",
          key: "destination",
          minWidth: 100,
        },
        {
          title: "公司",
          key: "short_name",
          minWidth: 100,
        },
        {
          title: "票价(元)",
          key: "discount_price",
          minWidth: 70,
        },
        {
          title: "班次类型",
          key: "plan_type_desc",
          minWidth: 100,
        },
        {
          title: "是否必发",
          key: "is_must_desc",
          minWidth: 100,
        },
        // {
        //   title: "开启返程",
        //   key: "is_return_trip_desc",
        //   minWidth: 100,
        // },  
        // {
        //   title: "返程日期",
        //   key: "return_trip_date",
        //   minWidth: 130,
        // },
        // {
        //   title: "间隔时间",
        //   key: "division_time",
        //   minWidth: 80,
        // },
        {
          title: "座位数",
          key: "seat",
          minWidth: 70,
        },
        {
          title: "售票数",
          key: "sale",
          minWidth: 70,
        },
        {
          title: "发送短信次数",
          key: "send_times",
          minWidth: 90,
        },
        {
          title: "司机-车牌",
          slot: "driver-action",
          minWidth: 150,
        },
        {
          title: "备注",
          key: "remark",
          width: 100,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 220,
        },
      ],
      columns2:[
        {
          title: "手机号",
          key: "user_phone",
          width: 100,
        },
        {
          title: "订单号",
          key: "order_id",
          width: 160,
        },
        {
          title: "日期",
          key: "date_desc",
          width: 130,
        },
        {
          title: "是否验票",
          slot: "use",
          width: 130,
        },
        {
          title: "验票日期",
          key: "use_time_desc",
          width: 130,
        },
        {
          title: "上车点",
          key: "on_stop_name",
          width: 130,
        },
        {
          title: "下车点",
          key: "off_stop_name",
          width: 130,
        },
        {
          title: "乘车人数",
          key: "passenger_num",
          width: 80,
        },
        {
          title: "乘车人信息",
          slot: "passenger_info",
          width: 260,
        },
      ],
      data: [],
      total: 0,
      attrTemplate: false,
      ids: [],
      display: "none",
      formSelection: [],
      selectionCopy: [],
      checkBox: false,
      isAll: -1,
      value1: [],
      batchEditShow:false,
      addTemporaryPlanShow: false,
      showAddRegular: false,
      PlanFormVisible: false,
      sendFormVisible: false,
      smsType: 1,
      regularList: [],
      orderBusList: [],
      regularVersionList: [],
      sendForm: {
        plan_id: '',
        send_type: 1,
        notice: ''
      },
      searchForm: {
        line_id: '',
        plan_dates_range: [],
        city_id: '',
        company_id: '',
        regular_id: '',
        status: 1,
        page: 1,
        limit: 20
      },
       regularForm: {
        line_id: '',
        regular_version_id: '',
        plan_dates_range: [],
        seat: 0,
        plan_type: 1,
        lowest_num: 0,
        adult_price: '',
        child_price: '',
        is_return_trip: 0,
        return_mins: 0,
        ticket_price: '',
        remark: '',
        division_time:0
      },
      planForm: {
        plan_id: '',
        start_time: '',
        ticket_price: '',
        seat: 0,
        plan_type: 1,
        lowest_num: 0,
        is_must: 0,
        adult_price: '',
        child_price: '',
        is_return_trip: 0,
        return_trip_date: '',
        remark: '',
        car_id: '',
        driver_id: '',
        car: {
          car_num:''
        },
        driver: {
          driver_name:''
        }

      },
      batchForm: {
        line_id: '',
        plan_dates_range: [],
        status: 1,
        is_return_trip: 0,
        return_mins: 0,
        remark: '',
        driver_id: 0,
        car_id: 0,
      },
      temporaryForm: {
        line_id: '',
        plan_date: [],
        dp_time: '',
        seat: 0,
        plan_type: 1,
        lowest_num: 0,
        is_return_trip: 0,
        return_mins: 0,
        remark: '',
        driver_id: 0,
        car_id: 0,
      },
        ruleValidate: {
        line_id: [
          { required: true, message: '请选择线路', trigger: 'change' }
        ],
        plan_dates_range: [
          { required: true, type:'array', message: '请选择排班日期', trigger: 'change' }
        ],
        plan_date: [
          { required: true,type:'array',  message: '请选择排班日期', trigger: 'change' }
        ],

        dp_time: [
          { required: true, message: '请选择班次时间', trigger: 'change' }
        ],
        seat: [
          { required: true,type:'number', message: '请输入座位', trigger: 'blur' }
        ],
        regular_version_id: [
          { required: true,type:'number',  message: '请选择线路班次版本', trigger: 'change' }
        ],
        plan_type: [
          { required: true,type:'number',  message: '请选择班次类型', trigger: 'blur' }
        ]
      },
      options:[],
      options2:[],
      driverOptions: [],
      carOptions: [],
      loading1:false,
      planList: [],
      passengerVisible: false,
      exportPlanId:''
      // activeKey:1
    };
  },
  watch: {
  
    tableList: {
      deep: true,
      handler(value) {
        value.forEach((item) => {
          this.formSelection.forEach((itm) => {
            if (itm.id === item.id) {
              item.checkBox = true;
            }
          });
        });
        const arr = this.tableList.filter((item) => item.checkBox);
        if (this.tableList.length) {
          this.checkBox = this.tableList.length === arr.length;
        } else {
          this.checkBox = false;
        }
      },
    },
  },
  created() {
  },
  mounted() {

      // 今天的时间
    var day2 = new Date()
    day2.setTime(day2.getTime())
    var s2 = day2.getFullYear() + '/' + (day2.getMonth() + 1) + '/' + day2.getDate()
    this.artFrom.plan_dates_range = [s2, s2]

    // if (this.$route.fullPath === "/admin/line/custom_bus_list?status=1") {
    //   this.getPath();
    // } else {
    //   this.getDataList();
    // }
    
     this.getAdminInfo()
    // this.getDataList();
  },
  methods: {


   // h获取管理员信息
    getAdminInfo(){
      adminInfoApi().then((res) => {
          this.cityList = res.data.admin_roles_info
          if(res.status==200){
             this.getDataList();
          }
        })
        .catch((error) => {
          console.log(error)
          this.$Message.error(error.msg||'错误请求')
        });
    },

    // 批量排班提交
    submRegularForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this
          console.log(this.regularForm)
           this.$Spin.show();
          addLineRegularApi(that.regularForm).then(res => {
            this.showAddRegular = false
            this.$Spin.hide();
            this.getDataList();
           this.$refs[formName].resetFields();

          }).catch(error => {
            console.log(error)
            this.$Spin.hide();
            this.$Message.error(error.msg);
          })
        } else {
        //  this.showAddRegular = true
        //   console.log('error submit!!')
        //    this.$refs[formName].resetFields();
        //   return false
         // 划重点 $nextTick 在下次 DOM 更新循环结束之后执行延迟回调...
            setTimeout(() => {
              this.showAddRegular = false;
              this.$nextTick(() => {
                this.showAddRegular = true;
              });
            }, 200);
        }
      })
    },

    // 临时排班提交
    submTemporaryForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this
  
          this.$Spin.show();
          addTemporaryPlanApi(that.temporaryForm).then(res => {
            this.addTemporaryPlanShow = false
            this.resetTemporaryForm('temporaryForm')
           this.$Spin.hide();
            this.getDataList();
          }).catch(error => {
            console.log(error)
            this.$Spin.hide();
            this.$Message.error(error.msg);
          })
        } else {
          console.log('error submit!4444!')
           setTimeout(() => {
              this.addTemporaryPlanShow = false;
              this.$nextTick(() => {
                this.addTemporaryPlanShow = true;
              });
            }, 200);
        }
      })
    },

    // 批量修改
    submBatchForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.batchForm)
          var that = this
          this.$Spin.show();
          batchEditPlanApi(that.batchForm).then(res => {
            this.batchEditShow = false
            this.resetBatchForm('batchForm')
            this.$Spin.hide();
            this.getDataList();
          }).catch(error => {
            console.log(error)
            this.$Spin.hide();
            this.$Message.error(error.msg);
          })
        } else {
          console.log('error submit333!!')
           setTimeout(() => {
              this.batchEditShow = false;
              this.$nextTick(() => {
                this.batchEditShow = true;
              });
            }, 200);
        }
      })
    },
    
    
    // 更改状态
    changePlaneStatusClick(type, item) {
      var that = this
        this.$Modal.confirm({
          title: '提示',
          content: '<p>您是否要更改状态?</p>',
          onOk: () => {
              this.$Spin.show();
              changePlanStatusApi({ type: type, plan_id: item.plan_id }).then(res => {
                  this.$Spin.hide();
                  this.$Message.success('修改成功');
                  this.getDataList();
                }).catch(error => {
                  this.$Spin.hide();
                  this.$Message.error(error.msg);
              })
          },
          onCancel: () => {
              this.$Message.info('已取消');
          }
      });
    },
    // 编辑班次 
    editPlan(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$Spin.show();
          changePlanStatusApi({ type: 'edit', plan_id: this.planForm.plan_id, data: this.planForm }).then(res => {
            this.$Spin.hide();
            this.$Message.success('修改成功');
            this.getDataList();
          }).catch(error => {
            this.$Spin.hide();
             this.$Message.error(error.msg);
          })
        } else {
          console.log('error submit333!!')
           setTimeout(() => {
              this.PlanFormVisible = false;
              this.$nextTick(() => {
                this.PlanFormVisible = true;
              });
            }, 200);
        }
      })
    },

    // 发送短信
    clickeSendSms: function() {
      console.log(this.sendForm)

      var that = this
      this.$Spin.show();
      sendPlanSmsApi(that.sendForm).then(res => {
        that.$Message.success('发送成功')
        that.$Spin.hide();
        that.getDataList();
        that.sendFormVisible = false
      }).catch(error => {
        this.$Spin.hide();
           this.$Message.error(error.msg);
      })
    },

    // selectDriver(item){
    // },
    

      /** *
   * 选择司机
   */
   driverClick: function(item) {
      this.selectDriver = true
      this.planForm = {
        plan_id: item.plan_id,
        start_time: item.start_time,
        ticket_price: item.ticket_price,
        plan_type: item.plan_type,
        adult_price: item.adult_price,
        child_price: item.child_price,
        is_return_trip: item.is_return_trip,
        return_trip_date: item.return_trip_date == 0 ? '' : '',
        lowest_num: item.lowest_num,
        is_must: item.is_must,
        seat: item.seat,
        remark: item.remark,
        driver_id: item.driver_id,
        car_id: item.car_id,
        driver: item.driver ? item.driver:{driver_name: ''},
        car: item.car ? item.car : {car_num: ''}
      }
    },

    /** *
   * 发送短信
   */
    sendSms: function(item) {
      this.sendFormVisible = true
      this.sendForm = {
        plan_id: item.plan_id,
        send_type: 1,
        notice: ''
      }
    },
    // 查看乘客
    lookPassenger(item) {
      this.passengerVisible = true
      this.exportPlanId = item.plan_id
      this.orderBusList = item.order_bus_list
    },

      // 选择城市触发
    selectCity(id) {
      var city = {}
      this.cityList.forEach(function(item) {
        if (item.city_id === id) {
          city = item
        }
      })
      var that = this
      if (!city.company_ids) {
        that.$Message.error('该城市下没有公司,请前往维护管理添加公司！')
        return
      }
      that.companyList = city.company_list
    },
    //搜索线路
    remoteMethodartFrom(query){
      this.options2 = []
      if (query !== '') {
        this.loading1 = true
        var that = this
         searchLineApi({line_name:query}).then(res => {
          this.loading1 = false
          res = res.data.list
          that.options2 = res
        }).catch(error => {
          console.log(error)
          this.$Message.error(error.msg);
        })
      } else {
        this.options2 = []
      }
    },
    // 搜索司机
    searchDriver(query){
      this.driverOptions = []
      if (query !== '') {
        this.loading1 = true
        var that = this
        searchDriverApi({keyword:query}).then(res => {
          this.loading1 = false
          res = res.data
          that.driverOptions = res
        }).catch(error => {
          console.log(error)
          this.$Message.error(error.msg);
        })
      } else {
        this.driverOptions = []
      }
    },
      // 搜索车辆
      searchCar(query){
      this.carptions = []
      if (query !== '') {
        this.loading1 = true
        var that = this
        searchCarApi({keyword:query}).then(res => {
          this.loading1 = false
          res = res.data
          that.carOptions = res
        }).catch(error => {
          console.log(error)
          this.$Message.error(error.msg);
        })
      } else {
        this.carOptions = []
      }
    },
     remoteMethod(query) {
     
    },

    
   onQueryChange(query){
      this.options = []
      if (query !== '') {
        this.loading1 = true
        var that = this
         searchLineApi({line_name:query}).then(res => {
          this.loading1 = false
          res = res.data.list
          that.options = res
        }).catch(error => {
          console.log(error)
          this.$Message.error(error.msg);
        })
      } else {
        // this.options = []
      }
   },
   
    selectLine(item) {
      if(item){
        this.regularForm.line_id = item
        getRegularVersionApi(item).then(res => {
          this.regularVersionList = res.data
        }).catch(error => {
          console.log(error)
          this.$Message.error(error.msg);
        })
      }
    },

    
 
    // 数据导出；
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let formValidate = this.artFrom;
      this.$Spin.show();
      let lebData = await this.getExcelData(formValidate);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },

     // 数据；
    async exportPassenger() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let planId = this.exportPlanId;
      this.$Spin.show();
      let lebData = await this.getPassengerExcelData(planId);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },
    
    getPassengerExcelData(planId) {
      return new Promise((resolve, reject) => {
        exportBusPassengerListApi({plan_id:planId}).then((res) => {
          return resolve(res.data);
        });
      });
    },
    getExcelData(excelData) {
      return new Promise((resolve, reject) => {
        exportLinePlanListApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
   
    // 排班列表；
    getDataList() {
      this.loading = true;
      getLinePlan(this.artFrom)
        .then((res) => {
          let data = res.data;
          this.tableList = data.list.map((item) => {
            if (this.isAll === 1) {
              item.checkBox = true;
            } else {
              item.checkBox = false;
            }
            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
   
   // 编辑班次
   ediePlanClick(item) {
      this.PlanFormVisible = true
      this.planForm = {
        plan_id: item.plan_id,
        start_time: item.start_time,
        ticket_price: item.ticket_price,
        plan_type: item.plan_type,
        adult_price: item.adult_price,
        child_price: item.child_price,
        is_return_trip: item.is_return_trip,
        return_trip_date: item.return_trip_date == 0 ? '' : '',
        lowest_num: item.lowest_num,
        is_must: item.is_must,
        seat: item.seat,
        remark: item.remark,
        driver_id: item.driver_id,
        car_id: item.car_id,
        driver: item.driver ? item.driver:{driver_name: ''},
        car: item.car ? item.car : {car_num: ''}
      }
    },

    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
      this.$refs.table.clearCurrentRow();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.formSelection = [];
      this.getDataList();
    },
    

    batchFormSelectDay(date){
      this.batchForm.plan_dates_range = date
      console.log(this.batchForm)
    }, 
    regularFormSelectDay(date){
      this.regularForm.plan_dates_range = date
    },
    temporaryFormSelectDay(date){
      this.temporaryForm.plan_date = date
    },
    selectReturnTrip(date){
      this.planForm.return_trip_date = date
    },
    selectDays(date){
      this.artFrom.plan_dates_range = date
    },
    resetBatchForm(formName) {
      this.$refs[formName].resetFields()
      this.batchEditShow = false
    },

    resetTemporaryForm(formName) {
      this.$refs[formName].resetFields();
      this.addTemporaryPlanShow = false
    },

    closePlanForm(formName) {
      this.regularForm = {
        adult_price: "",
        child_price: "",
        is_return_trip: 0,
        line_id: "",
        lowest_num: 0,
        plan_dates_range: [],
        plan_type: 1,
        regular_version_id: '',
        remark: "",
        return_mins: 0,
        seat: 0,
        ticket_price: "",
      }

      this.showAddRegular = false
      this.$refs[formName].resetFields()
    },

    
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-modal-mask {
  z-index: 999 !important;
}

/deep/.ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  >>> .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.ivu-table-cell-expand-expanded {
  margin-top: -6px;
  margin-right: 33px;
  transition: none;

  .ivu-icon {
    vertical-align: 2px;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}
</style>